<template>
  <view v-if="visible" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
    <view class="bg-white rounded-[24rpx] mx-[32rpx] w-full max-w-[600rpx] p-[32rpx]">
      <!-- 标题 -->
      <view class="text-center mb-[32rpx]">
        <text class="text-[32rpx] font-bold text-gray-800">评价用户</text>
      </view>
      
      <!-- 用户信息 -->
      <view class="flex items-center mb-[32rpx] p-[20rpx] bg-gray-50 rounded-[16rpx]">
        <image
          :src="userInfo.avatar || 'http://www.dzgktf.com/templets/default/images/wtyt.jpg'"
          class="w-[60rpx] h-[60rpx] rounded-full mr-[16rpx]"
          mode="aspectFill"
        />
        <view>
          <text class="text-[28rpx] font-bold text-gray-800">{{ userInfo.name }}</text>
          <text class="text-[24rpx] text-gray-500">{{ userInfo.taskTitle }}</text>
        </view>
      </view>
      
      <!-- 星级评分 -->
      <view class="mb-[32rpx]">
        <text class="text-[28rpx] font-medium text-gray-700 mb-[16rpx] block">服务评分</text>
        <view class="flex items-center justify-center gap-x-[16rpx]">
          <view
            v-for="star in 5"
            :key="star"
            class="w-[48rpx] h-[48rpx] flex items-center justify-center cursor-pointer transition-all duration-200"
            @click="handleStarClick(star)"
          >
            <IconFont
              :name="star <= rating ? 'star-fill' : 'star'"
              :class="star <= rating ? 'text-yellow-400' : 'text-gray-300'"
              size="32"
            />
          </view>
        </view>
        <view class="text-center mt-[12rpx]">
          <text class="text-[24rpx] text-gray-500">{{ getRatingText() }}</text>
        </view>
      </view>
      
      <!-- 评论输入 -->
      <view class="mb-[32rpx]">
        <text class="text-[28rpx] font-medium text-gray-700 mb-[16rpx] block">评价内容</text>
        <nut-textarea
          v-model="comment"
          class="w-full min-h-[120rpx] p-[20rpx] border border-gray-300 rounded-[16rpx] text-[26rpx] text-gray-800 resize-none"
          placeholder="请输入您的评价内容..."
          maxlength="200"
        />
        <view class="flex justify-end mt-[8rpx]">
          <text class="text-[22rpx] text-gray-400">{{ getFinalCommentLength() }}/200</text>
        </view>
      </view>
      
      <!-- 快捷评价标签 -->
      <view class="mb-[32rpx]">
        <text class="text-[28rpx] font-medium text-gray-700 mb-[16rpx] block">快捷评价</text>
        <view class="flex flex-wrap gap-[12rpx]">
          <view
            v-for="tag in quickTags"
            :key="tag"
            class="px-[16rpx] py-[8rpx] rounded-[20rpx] text-[24rpx] cursor-pointer transition-all duration-200"
            @click="toggleTag(tag)"
          >
            {{ tag }}
          </view>
        </view>
      </view>
      
      <!-- 按钮区域 -->
      <view class="flex gap-x-[16rpx]">
        <nut-button
          size="large"
          type="default"
          class="flex-1 border-gray-300 text-gray-600 rounded-[20rpx] py-[16rpx]"
          @click="handleCancel"
        >
          取消
        </nut-button>
        <nut-button
          size="large"
          type="primary"
          class="flex-1 bg-blue-500 border-none rounded-[20rpx] py-[16rpx]"
          :disabled="!canSubmit"
          @click="handleConfirm"
        >
          确定
        </nut-button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { IconFont } from '@nutui/icons-vue-taro';
import { Button as nutButton } from '@nutui/nutui-taro';

/**
 * 评价弹窗组件
 * @description 包含星级评分、评论输入、快捷标签等功能
 */

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  userInfo: {
    type: Object,
    default: () => ({
      name: '',
      avatar: '',
      taskTitle: ''
    })
  }
});

const emit = defineEmits(['confirm', 'cancel']);

// 评分
const rating = ref(0);

// 评论内容
const comment = ref('');

// 快捷评价标签
const quickTags = ref([
  '工作认真',
  '态度良好',
  '按时完成',
  '沟通顺畅',
  '专业能力强',
  '服务周到',
  '响应及时',
  '质量优秀'
]);

// 已选择的标签
const selectedTags = ref([]);

// 是否可以提交
const canSubmit = computed(() => {
  return rating.value > 0 && comment.value.trim().length > 0;
});

/**
 * 点击星级
 */
const handleStarClick = (star) => {
  rating.value = star;
};

/**
 * 获取评分文字
 */
const getRatingText = () => {
  const texts = ['', '很差', '较差', '一般', '良好', '优秀'];
  return texts[rating.value] || '请选择评分';
};

/**
 * 获取最终评论长度（包含标签）
 */
const getFinalCommentLength = () => {
  let finalComment = comment.value.trim();
  // if (selectedTags.value.length > 0) {
  //   const tagText = selectedTags.value.join('，');
  //   if (finalComment) {
  //     finalComment += '，' + tagText;
  //   } else {
  //     finalComment = tagText;
  //   }
  // }
  return finalComment.length;
};

/**
 * 切换标签选择
 */
const toggleTag = (tag) => {
  console.log("tag", tag)
  comment.value = comment.value + (comment.value ? '，' : '') + tag;
  console.log("comment", comment.value)
  // const index = selectedTags.value.indexOf(tag);
  // if (index > -1) {
  //   // 如果标签已选中，则移除
  //   selectedTags.value.splice(index, 1);
  // } else {
  //   if (selectedTags.value.length < 3) {
  //     // 如果标签未选中，则添加
  //     selectedTags.value.push(tag);
  //   }
  // }
};

/**
 * 确认评价
 */
const handleConfirm = () => {
  if (!canSubmit.value) return;
  
  // 合并手动输入的内容和选择的标签
  // let finalComment = comment.value.trim();
  // if (selectedTags.value.length > 0) {
  //   const tagText = selectedTags.value.join('，');
  //   if (finalComment) {
  //     finalComment += '，' + tagText;
  //   } else {
  //     finalComment = tagText;
  //   }
  // }
  
  const evaluateData = {
    rating: rating.value,
    comment: comment.value, // 完整的评价内容
    // tags: selectedTags.value, // 单独保存选择的标签
    userInfo: props.userInfo
  };
  console.log("evaluateData", evaluateData) 
  
  emit('confirm', evaluateData);
  resetForm();
};

/**
 * 取消评价
 */
const handleCancel = () => {
  emit('cancel');
  resetForm();
};

/**
 * 重置表单
 */
const resetForm = () => {
  rating.value = 0;
  comment.value = '';
  selectedTags.value = [];
};
</script> 

<style lang="scss">
.nut-textarea{
  background-color: #f0f0f0;
}
</style>